<script setup>
import { ref } from 'vue'
import axios from 'axios'
import Header from './common/header.vue'

const WEB_URL = window.web_url;
const article_list = ref([]);
const get_download_list = () => {

    let url = WEB_URL + '/api/cms.article.index?category=download';

    axios.get(url).then((res) => {
        article_list.value = res.data.list
        console.log(res.data.list)
        for (let i = 0; i < res.data.list.length; i++) {
            article_list.value[i].title = res.data.list[i].title.replace(/<[^>]+>/g, "")
            article_list.value[i].fujian = JSON.parse(res.data.list[i].attachment)

        }
        console.log(article_list.value)

    })
}

// 使用createObjectURL下载文件
const downloadFile = async (fujian) => {
    try {
        const fileUrl = WEB_URL + '/storage/' + fujian.response;
        
        // 使用axios获取文件的二进制数据
        const response = await axios.get(fileUrl, {
            responseType: 'blob' // 重要：指定响应类型为blob
        });
        
        // 创建Blob对象
        const blob = new Blob([response.data]);
        
        // 创建Object URL
        const objectUrl = URL.createObjectURL(blob);
        
        // 创建a标签并触发下载
        const link = document.createElement('a');
        link.href = objectUrl;
        link.download = fujian.name; // 设置下载文件名
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        
        // 清理：移除a标签并释放Object URL
        document.body.removeChild(link);
        URL.revokeObjectURL(objectUrl);
        
    } catch (error) {
        console.error('文件下载失败:', error);
        alert('文件下载失败，请稍后重试');
    }
}

get_download_list()
</script>

<template>

    <Header></Header>


    <main class="main-content js-main-content">

        <div class="container">

            <div class="row">

                <div class="col-md-12">

                    <div class="page-header">
                        <h3>下载中心</h3>
                    </div>

                    <div class="row">

                        <div class="col-md-12">

                            <div class="panel panel-default">

                                <div class="panel-body">

                                    <div style="margin-top: 20px;" v-for="value in article_list" :key="value.id">


                                        <div class="blogs__item__title">
                                            <a :href="value.url">{{ value.title }}</a>
                                        </div>
                                        <div class="blogs__item__fujian" v-for="fujian in value.fujian" :key="fujian.id">

                                            <i class="fa fa-clock-o"></i>
                                            <!-- <a href="javascript:void(0)" @click="downloadFile(fujian)">{{ fujian.name }}</a> -->
                                            <a :href="WEB_URL + '/storage/' + fujian.response" 
                                                :download="fujian.name" target="_blank">{{ fujian.name }}</a>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </main>


</template>